<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        img {
            height: 85px;
            width: 70px;
            position: fixed;
        }

        .dialog {
            position: fixed;
            width: 100%;
            height: 100%;
            background: #000000ba;
            z-index: 999;
        }

        .dialog .center {
            width: 400px;
            height: 300px;
            background: #fff;
            border-radius: 10px;
            box-sizing: border-box;
            padding: 10px;
            display: flex;
            flex-direction: column;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }

        .dialog .center .dialog_title {
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 40px;
            border-bottom: 1px solid #e0e0e0;
        }

        .dialog_title .close {
            font-size: 30px;
            cursor: pointer;
        }

        .dialog .center .dialog_content {
            display: flex;
            align-items: center;
            justify-content: center;
            flex: 1;
        }
    </style>
</head>

<body>


    <div style="display: none;" class="dialog">
        <div class="center">
            <div class="dialog_title">
                <div class="text">恭喜中奖</div>
                <div class="close">x</div>
            </div>
            <div class="dialog_content">
                恭喜中的三等奖
            </div>
        </div>
    </div>

</body>
<script>
    let { innerWidth, innerHeight } = window, createdId = null, gImg = null;
    // 生成随机x轴红包
    function createdHb() {
        let img = document.createElement("img");
        let left = Math.random() * (innerWidth - 70);

        img.src = "./hb.png";
        img.style = `
          left: ${left}px;
          top: -85px;
        `
        
        img.onclick = function () {
            gImg = img;
            clearInterval(createdId)
            _("img").forEach(function (img) {
                clearInterval(img.IntervalId)
            })

            random()
            $(".dialog").style.display = "block"
        }
       
        $("body").appendChild(img);
        
        motion(img)
    }

    function motion(img) {
        img.IntervalId = setInterval(function () {
            let newTop = parseInt(img.style.top);
            if (newTop >= innerHeight) {
                $("body").removeChild(img);
                clearInterval(img.IntervalId)
            } else {
                img.style.top = `${newTop + 10}px`;
                
            }
        }, 80)
    }

    $(".dialog_title .close").onclick = function () {
        $(".dialog").style.display = "none"
        $("body").removeChild(gImg);
        clearInterval(gImg.IntervalId)

        _("img").forEach(function (img) {
            motion(img)
        })

        auto()
    }

    function random() {
        let leavel = Math.random()
        console.log(leavel);
        if (leavel < 0.01) {
            $(".dialog_content").innerText = "一等奖"
        } else if (0.01< leavel && leavel <= 0.1) {
            $(".dialog_content").innerText = "二等奖"
        } else {
            $(".dialog_content").innerText = "三等奖"
        }
    }

    // createdHb()

    function auto() {
        createdId = setInterval(function () {
            createdHb()
        }, 300)
    }

    auto()


    // 让红包运动

    // 拆红包的所有功能
    //  让被点击的红包停止运动，生成新红包的也停止运动，已有红包也要停止运动
    //  一等奖(1)   二等奖(10)  三等奖(89)


    function $(className) {
        return document.querySelector(className);
    }

    function _(className) {
        return document.querySelectorAll(className);
    }
</script>

</html>